<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/base.jspf"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户充值管理</title>
<style type="text/css">
 #date1 {
	 margin: 2px;  
	 height: 37px;
}

#date2 {
	margin: 2px;
	height: 37px;
}
	.modal-dialog {
		max-width: 1000px;
	}
.select-lx {
	margin: 2px;
	height: 37px;
}

.layui-inline {
	height: 100px;
	margin-top:15px;
}

#hymc {
	margin: 2px;
	height: 37px;
}
#daili{
  width:199px;
  height:37px;
}
#table_id_example_paginate{
 margin-right:100px;
}
.class-input-pageNumber{
    
	width:40px;
	height:23px;
	position: absolute;
	right:550px;
	top:12px;
}
.class-span-searchBtn{
	height:24px;
	width:36px;
	font-size:14px;
	text-algin:center;
	line-height:25px;
	padding:0!important;
	position: absolute;
	right:500px;
	top:12px;
}
.dataTables_length{
	margin-top:12px;
	margin-left:50px;
}
.tableSearch{
    position: relative;
}
.hidden-c {
	display:none;
}

.btn-c-dealShenQing {
	display:none;
}
table th,table tr,table td {
text-align: center;
vertical-align:middle;
}
</style>
			<div class="layui-inline">
				<div class="layui-inline">
					<input type="text" id="date1" placeholder="开始时间" value=""><br> 
					<input type="text" id="date2" placeholder="结束时间" value="">
				</div>
				<div class="layui-inline select-lx">
					<select id="czlx" class="select-lx">
						<option value="">充值类型</option>
						<option value="快速充值">&nbsp;&nbsp;在线充值</option>
						<option value="人工加款">&nbsp;&nbsp;人工加款</option>
					</select> 
					<select id="zflx" class="select-lx">
						<option value="">存款方式</option>
						<option value="网银转账">&nbsp;&nbsp;网银转账</option>
						<option value="手机银行转账">&nbsp;&nbsp;手机银行转账</option>
						<option value="银行柜台转账">&nbsp;&nbsp;银行柜台转账</option>
						<option value="ATM自动柜员机">&nbsp;&nbsp;ATM自动柜员机</option>
						<option value="ATM现金入款">&nbsp;&nbsp;ATM现金入款</option>
						<option value="其他">&nbsp;&nbsp;&nbsp;其他</option>
					</select> 
					<select id="czzt" class="select-lx">
						<option value="">充值状态</option>
						<option value="未处理">&nbsp;&nbsp;未处理</option>
						<option value="未支付">&nbsp;&nbsp;未支付</option>
						<option value="处理中">&nbsp;&nbsp;处理中</option>
						<option value="充值成功">&nbsp;&nbsp;充值成功</option>
						<option value="充值失败">&nbsp;&nbsp;充值失败</option>
					</select>
					<button class="layui-btn layui-btn-radius" id="btn_search" style="margin-left:35px;">查询</button>
					<br> 
					<input type="text" id="hymc" placeholder="会员名称" value=""> 
					<input type="text" id="daili" placeholder="所属代理" value="">
					<button class="layui-btn layui-btn-radius" id="button-i-resetTableContent" style="margin-left:15px;">重置</button>
				</div>
			</div>
			<div>
				<table class="class-tableDataTable class-table-needClick display table table-striped table-bordered table-hover" id="khczjl">
					<thead>
						<tr>
							<th style="hidden-c"></th>
							<th style="hidden-c"></th>
							<th>用户账号</th>
							<th>存款户名</th>
							<th>支付平台</th>
							<th>充值操作</th>
							<th>存款方式</th>
							<th>存款金额</th>
							<th>存款账号</th>
							<th>充值类型</th>
							<th>充值状态</th>
							<th>平台收款姓名</th>
							<th>平台收款账号</th>							
							<th>申请时间</th>
							<th>处理时间</th>
							<th>操作人员</th>
							<th>操作备注</th>
						</tr>
					</thead>
				</table>
			</div>

<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ></div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div> 

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width:900px;width:900px;min-width:900px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">处理申请</h4>
            </div>
            <div class="modal-body">
		<table class="table table-bordered table-striped chargeTable">
				<tbody>
					<tr>
						<td width="17%" class="text-right">会员账号：</td>
						<td width="30%" class="input-auto" id="input-i-userAccount"></td>
						<td width="23%" class="text-right">充值类型：</td>
						<td width="30%" class="input-auto" id="input-i-isJiaKuan"></td>
					</tr>
					<tr>
						<td class="text-right">转账平台：</td>
						<td class="input-auto" id="input-i-zhifupt"></td>
						<td class="text-right">转账姓名：</td>
						<td class="input-auto" id="input-i-cunkuanperson">
						</td>
					</tr>
					<tr>
						<td class="text-right">转账帐号：</td>
						<td  class="input-auto" id="input-i-zhuanzhangrenAccount">
						</td>
						<td class="text-right">申请时间：</td>
						<td class="input-auto" id="input-i-qukuanTime"></td>
					</tr>
					<tr>
						<td class="text-right media-middle">转账金额：</td>
						<td class="input-auto" id="input-i-zhuanzhangjine">
						</td>
						<td class="text-right media-middle">转账方式：</td>
						<td class="input-auto" id="input-i-zhuanzhangway"></td>
					</tr>
					<tr>
						<td class="text-right media-middle">处理结果：</td>		
						<td><select name="status" id="select-i-dealState" class="form-control">
							<option value="充值成功">充值成功</option>
							<option value="信息有误">信息有误</option>
						</select></td>
					</tr>
					<tr class="hidden eremark">
						<td class="text-right">失败原因：</td>
						<td colspan="3"><input type="text" name="remark" class="form-control"></td>
					</tr>
				</tbody>
			</table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btn-i-dealNewTiKuan">提交更改</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>			  			
	<script>
	var PARENT_TR
		layui.use('laydate', function() {
			var laydate = layui.laydate;
			laydate.render({
				elem : '#date1' 
			});
			laydate.render({
				elem : '#date2'
			});
		});
	bindLockUnlockBtns(".class-tableDataTable", "/zhgl/rechageOrDrawingLocking.do")
		
		function dataTable01(){
				var oTable=	$("#khczjl").DataTable({
						 "bProcessing" : false, // 是否显示取数据时的那个等待提示
						"bServerSide" : true,//这个用来指明是通过服务端来取数据
						 "bPaginate" : true, //是否显示分页 
						"sAjaxSource" : "/zhgl/findRechargeRecord.do",//这个是请求的地址
						"fnServerData" : retrieveData, // 获取数据的处理函数
						"destroy":true,
					      // "bPaginate": true,
					       "bLengthChange": true,      
					      "bSort": false,
					      // "bInfo": true,
					      "bAutoWidth": false,
//					         "bServerSide":true,
					      'aLengthMenu':[5,10, 20], 
					       "searching": false,  
					       "pagingType": "simple_numbers",
					       "dom": "t<'tableinfo'i<'tableSearch'p>l>",  
					       
					       "language": {//语言设置  
					            "lengthMenu": "每页显示 _MENU_ 条记录",     
					            "zeroRecords": "没有检索到数据",     
					            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
					            "info": "没有数据",     
					            "oPaginate": {     
					                "sFirst": "首页",     
					                "sPrevious": "前一页",     
					                "sNext": "后一页",     
					                "sLast": "尾页"    
					          	},
					            "search":"",
					            "searchPlaceholder": "请输入关键字",
					            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
					            "infoEmpty":      "没有找到匹配的信息",
					         },  
					         "columnDefs": [{"defaultContent": "",
	                              "targets": "_all"}],
					         "columns": [
					        	 { "data": "id", "className": "id-td hidden-c" },
								 { "data": "userid", "className": "userid-td hidden-c" },	
			                     { "data": "name", "className": "userAccount-td" },
			                     { "data": "ckname", "className": "cunkuanperson-td"   },
			                     { "data": "zhifupt", "className": "zhifupt-td"  },
			                     { "data": "caozuo" },
			                     { "data": "hydengji", "className": "zhuanzhangway-td"},
			                     { "data": "fukuanje", "className": "zhuanzhangjine-td" },
			                     { "data": "zhifuzh", "className": "zhuanzhangrenAccount-td" },
			                     { "data": "type", "className": "isJiaKuan-td" },
			                     { "data": "state" },
								 { "data": "skname", "className": "skname-td" },
								 { "data": "skbankzh", "className": "skbankzh-td" },		                     
			                     { "data": "sqtime", "className": "qukuanTime-td" },
			                     { "data": "cltime" },
			                     { "data": "czname" },
			                     { "data": "beizhu", "className": "beizhu-td" }
			                 ],	
					})
		function retrieveData(sSource, aoData, fnCallback) {
					$.ajax({
						url : sSource,//这个就是请求地址对应sAjaxSource
						data : {
							"pageCount":aoData[0].value,
							"startIndex":aoData[3].value,
							"lineCount":aoData[4].value,
						},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
						type : 'post',
						dataType : 'json',
						async : false,
						success : function(result) { 
							var newJson = result.aaData
			        		 for (var i = 0; i < newJson.length; i++) {
			         			 var item = newJson[i]
			         			if (item.caozuo == "锁定") {
			         				 var caozuoHTML = "<button data-type='unlock' class='btn-c-suoding btn btn-primary'>锁定</button>"
			         			 	 var dealShenQingBtn = "<button class='btn-c-dealShenQing btn btn-success'>处理申请</button>"
			         			 	 item.caozuo = caozuoHTML + dealShenQingBtn
			         			 } else if (item.caozuo == "取消锁定") {
			         				var caozuoHTML = "<button data-type='lock' class='btn-c-suoding btn btn-primary'>取消锁定</button>"
			         			 	 var dealShenQingBtn = "<button class='btn-c-dealShenQing btn btn-success active'>处理申请</button>"
			         			 	 item.caozuo = caozuoHTML + dealShenQingBtn	
			         			 }
			        		 }
							fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
							
						},
						error : function(msg) {
						}
					});
				}
			}
		dataTable01();
		insertSearchBtn()
		document.querySelector("#btn_search").addEventListener("click", function(event) {
			if($("#date1").val()=="" && $("#date2").val()=="" && $("#czlx").val()=="" && $("#zflx").val()==""
				&& $("#czzt").val()=="" && $("#hymc").val()=="" && $("#daili").val()==""){
				 return 
			 }	
			else{
				var oTable=	$("#khczjl").DataTable({
					 "bProcessing" : false, // 是否显示取数据时的那个等待提示
					"bServerSide" : true,//这个用来指明是通过服务端来取数据
					 "bPaginate" : true, //是否显示分页 
					"sAjaxSource" : "/zhgl/likeFindRechageRecord.do",//这个是请求的地址
					"fnServerData" : retrieveData, // 获取数据的处理函数
					"destroy":true,
				      // "bPaginate": true,
				       "bLengthChange": true,      
				      "bSort": false,
				      // "bInfo": true,
				      "bAutoWidth": false,
//				         "bServerSide":true,
				      'aLengthMenu':[5,10, 20], 
				       "searching": false,  
				      /*  "pagingType": "simple_numbers",
				       "dom": "t<'tableinfo'i<'tableSearch'p>l>",  */
				       
				       "language": {//语言设置  
				            "lengthMenu": "每页显示 _MENU_ 条记录",     
				            "zeroRecords": "没有检索到数据",     
				            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
				            "info": "没有数据",     
				            "oPaginate": {     
				                "sFirst": "首页",     
				                "sPrevious": "前一页",     
				                "sNext": "后一页",     
				                "sLast": "尾页"    
				          	},
				            "search":"",
				            "searchPlaceholder": "请输入关键字",
				            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
				            "infoEmpty":      "没有找到匹配的信息",
				         },  
				         "columnDefs": [{"defaultContent": "",
                             "targets": "_all"}],
				         "columns": [
				        	 { "data": "id", "className": "id-td hidden-c" },
							 { "data": "userid", "className": "userid-td hidden-c" },	
		                     { "data": "name", "className": "userAccount-td" },
		                     { "data": "ckname", "className": "cunkuanperson-td"   },
		                     { "data": "zhifupt", "className": "zhifupt-td"  },
		                     { "data": "caozuo" },
		                     { "data": "hydengji", "className": "zhuanzhangway-td"},
		                     { "data": "fukuanje", "className": "zhuanzhangjine-td" },
		                     { "data": "zhifuzh", "className": "zhuanzhangrenAccount-td" },
		                     { "data": "type", "className": "isJiaKuan-td" },
		                     { "data": "state" },
							 { "data": "skname", "className": "skname-td" },
							 { "data": "skbankzh", "className": "skbankzh-td" },		                     
		                     { "data": "sqtime", "className": "qukuanTime-td" },
		                     { "data": "cltime" },
		                     { "data": "czname" },
		                     { "data": "beizhu", "className": "beizhu-td" }
		                 ],	
				})

	function retrieveData(sSource, aoData, fnCallback) {
				$.ajax({
					url : sSource,//这个就是请求地址对应sAjaxSource
					data : {
						"pageCount":aoData[0].value,
						"startIndex":aoData[3].value,
						"lineCount":aoData[4].value,
						 "date1" : $('#date1').val(),
		    	        "date2" : $('#date2').val(),
		    	        "hydengji": $('#zflx').val(),
		    	        "type" :$('#czlx').val(),
		    	        "state" : $('#czzt').val(),
		    	        "name" :$('#hymc').val(),
		    	        "daili" : $('#daili').val(),
					},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
					type : 'post',
					dataType : 'json',
					async : false,
					success : function(result) { 
						var newJson = result.aaData
		        		 for (var i = 0; i < newJson.length; i++) {
		         			 var item = newJson[i]
		         			 if (item.caozuo == "锁定") {
		         				 var caozuoHTML = "<button data-type='unlock' class='btn-c-suoding btn btn-primary'>锁定</button>"
		         			 	 var dealShenQingBtn = "<button class='btn-c-dealShenQing btn btn-success'>处理申请</button>"
		         			 	 item.caozuo = caozuoHTML + dealShenQingBtn
		         			 } else if (item.caozuo == "取消锁定") {
		         				var caozuoHTML = "<button data-type='lock' class='btn-c-suoding btn btn-primary'>取消锁定</button>"
		         			 	 var dealShenQingBtn = "<button class='btn-c-dealShenQing btn btn-success active'>处理申请</button>"
		         			 	 item.caozuo = caozuoHTML + dealShenQingBtn			         				 
		         			 }
		        		 }
						result.aaData = newJson;
						fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
					},
					error : function(msg) {
					}
				});
			}
			}
		})
		
		$("#button-i-resetTableContent").on("click", function(event) {
			dataTable01()
			 $('#date1').val("");
	         $('#date2').val("");
	         $('#zflx').val("");
	         $('#czlx').val("");
	         $('#czzt').val("");
	         $('#hymc').val("");
	         $('#daili').val(""); 
		})
		$(".class-tableDataTable").on("click", ".btn-c-dealShenQing", function(event) {
			var $parent = $(event.currentTarget).closest("tr")
			PARENT_TR = $parent
			$(".chargeTable .input-auto").each(function(index, element) {
				var name = element.id.split("-")[2]
				$(element).text($parent.find("." + name + "-td").text())
			})
			$("#myModal").modal("show")
		})
		$("#btn-i-dealNewTiKuan").on("click", function(event) {
			var objItem = {
				url: "/zhgl/rechargeAudit.do",
				type: "post",
				data: {
					id: PARENT_TR.find(".id-td").text(), 
					name: PARENT_TR.find(".userAccount-td").text(),
					type: "人工加款",
					fukuanje: PARENT_TR.find(".zhuanzhangjine-td").text(),
					state: $("#select-i-dealState").val(),
					caozuo: "已处理",
					userid: PARENT_TR.find(".userid-td").text(),
				},
				success: function(data) {
					PARENT_TR.find(".zhuanzhangjine-td").prev().prev().empty()	
					$("#myModal").modal("hide")
					PARENT_TR.find(".zhuanzhangjine-td").prev().prev().text("已处理")
					showNoticeModal('处理成功！')
					var table = $('#khczjl').DataTable();			
	    			table.ajax.url("/zhgl/likeFindRechageRecord.do").load();
				},
				error: function(status) {
					showNoticeModal('网络繁忙,请稍候再试')
				}
			}
			if (status == "信息有误") {
				var beizhuValue = $("[name='remark']").val()
				if (beizhuValue.trim() == "") {
					showNoticeModal('请填写失败原因')
					return
				}
				objItem.data.beizhu = beizhuValue
			}
			ajax(objItem)	
		})
		$("#select-i-dealState").on("change", function(e) {
			var val = $(e.currentTarget).val()
			if (val == "充值成功") {
				$(".eremark").addClass("hidden")
			} else {
				$(".eremark").removeClass("hidden")
			}
		})
		$("#myModal").on("hidden.bs.modal", function() {
			$("#select-i-dealState").val("充值成功")
			$("[name='remark']").val("")
			$("[name='remark']").addClass("hidden")
		})
	</script>
